<script type="text/html" id="templates/settings/preferences/grid.html">
  <div class="preferences-panel-grid">
    <div class="settings-item">
      <label>
        Enable grid
        <input type="checkbox" value="1" class="enable-grid-checkbox" name="enable-grid-checkbox"/>
      </label>
    </div>
    <div class="settings-item settings-item-grid-size">
      <label>Grid size</label>
      <div class="grid-size-container size-picker-container">
        <div class="size-picker-option"
          title="1px" rel="tooltip" data-placement="top" data-size="1"></div>
        <div class="size-picker-option"
          title="2px" rel="tooltip" data-placement="top" data-size="2"></div>
        <div class="size-picker-option"
          title="3px" rel="tooltip" data-placement="top" data-size="3"></div>
        <div class="size-picker-option"
          title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
      </div>
    </div>
    <div class="settings-item settings-item-grid-spacing">
      <label>Grid spacing</label>
      <div class="grid-spacing-container size-picker-container">
        <div class="size-picker-option"
          title="1px" rel="tooltip" data-placement="top" data-size="1"></div>
        <div class="size-picker-option"
          title="2px" rel="tooltip" data-placement="top" data-size="2"></div>
        <div class="size-picker-option"
          title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
        <div class="size-picker-option"
          title="8px" rel="tooltip" data-placement="top" data-size="8"></div>
        <div class="size-picker-option"
          title="16px" rel="tooltip" data-placement="top" data-size="16"></div>
        <div class="size-picker-option"
          title="32px" rel="tooltip" data-placement="top" data-size="32"></div>
        <div class="size-picker-option"
          title="64px" rel="tooltip" data-placement="top" data-size="64"></div>
      </div>
    </div>
    <div class="settings-item settings-item-grid-color">
      <label>Grid color</label>
      <div class="grid-colors-list"></div>
      <script type="text/template" id="color-list-item-template">
        <div class="grid-colors-item {{:selected}}"
             data-color="{{color}}"
             style="background:{{background}}"
             title="{{title}}">
        </div>
      </script>
    </div>
  </div>
</script>
